<template>
  <div class="not_found">
    <h1>404 - 页面未找到</h1>
    <p>抱歉，您访问的页面"{{ router_path }}"不存在。</p>
    <router-link to="/" class="back_home">返回首页</router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
    computed: {
      router_path() {
        return Array.isArray(this.$route.params.pathMatch)
          ? this.$route.params.pathMatch.join("/")
          : this.$route.params.pathMatch || "";
      },
    },
  };
</script>

<style scoped>
  .not_found {
    text-align: center;
    padding: 50px;
  }

  h1 {
    color: #ff4d4f;
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .back_home {
    display: inline-block;
    margin-top: 20px;
    color: #1890ff;
    text-decoration: none;
  }
</style>
